import { useRef } from "react";

import { Button } from "antd";
import { PlusOutlined } from "@ant-design/icons";

import { QueryPage } from "@components";
import { useFields, GetColumns } from "./config";

import { queryEmerMatter, addOrEditEmerMatter } from "@apis/emergencyEventApi";

import { useMainContext } from '@contexts/MainContext'

const EmergencyEvent = () => {
  const {
    queryFormRef,
    fields,
    modalRef,
    modalFormRef,
    modalFields,
    getWeatherTypeUnitAreaUnitRisks
  } = useFields()

  const { isButtomShow } = useMainContext()

  const formProps = {
    formRef: queryFormRef,
    fields: fields,
    initialValues: {
      subjectCountStart: 0,
      subjectCountEnd: 1000,
    },
    extraTail: (
      <>
        {isButtomShow('280103') && <Button
          icon={<PlusOutlined />}
          onClick={() => modalRef.current.showModal()}
        >
          手工新增应急事项
        </Button>}
      </>
    ),
  };

  function editFun(row) {
    modalRef.current.showModal(row);
    getWeatherTypeUnitAreaUnitRisks(row)
  }

  const tableProps = {
    rowKey: "emerMasterId",
    columns: GetColumns(editFun),
  };

  const modalFormProps = {
    formRef: modalFormRef,
    fields: modalFields,
  };

  return (
    <QueryPage
      formProps={formProps}
      tableProps={tableProps}
      queryApi={queryEmerMatter}
      modalRef={modalRef}
      modalFormProps={modalFormProps}
      addApi={addOrEditEmerMatter}
      updataId="emerMasterId"
      updataApi={addOrEditEmerMatter}
    />
  );
};

export default EmergencyEvent;
